<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var obj = {
            _data:{
                name:'laowang',
                age:18
            }
        }
        for (let key of Object.keys(obj._data)){
            Object.defineProperty(obj,key,{
                get(){
                    return obj._data[key]
                },
                set(newVal){
                    obj._data[key] = newVal
                }
            })
        }
        obj.age+=1
        obj.name ='lil'
        console.log(obj);
    //     const vm = {
    //     _data: {
    //       name: "laowang",
    //       age: 18,
    //       count: 0,
    //     },
    //   };

      /* 
        我们配置的数据放在了vm的_data身上
        因为this也好,插值也好,都是直接找的vm对象,所以每次拿数据都要通过vm._data来拿
        所以我们希望把_data上的属性,在vm中放一份,我们读取和修改都是直接操作的是vm身上的数据
        vm身上的数据被获取或者被修改的时候,会通知_data去读或者该值
        以上的操作就是数据代理的操作
      
      */

      //数据代理的实现
    //   for (let key of Object.keys(vm._data)) {
    //     Object.defineProperty(vm, key, {
    //       get: function proxyGetter() {
    //         return vm._data[key];
    //       },
    //       set: function proxySetter(newVal) {
    //         vm._data[key] = newVal;
    //       },
    //     });
    //   }
    //   vm.name = 'dd'
    //  console.log(vm); 
    </script>
</body>

</html>